import React, {useContext, useEffect, useState} from 'react';
import {Dimensions, TouchableOpacity, View} from 'react-native';
import {Avatar, Icon, Text} from 'react-native-elements';

import LocaleContext from '../libs/locale';
import {getTokenCompleteName, getTokenName, getTokenTotal} from "../libs/nodes";
import logo from "../assets/logo.png";
import {constansts} from "../libs/constansts";
import Clipboard from "@react-native-community/clipboard";
import Toast from "react-native-simple-toast";


const {width,height,scale} = Dimensions.get("window");

const TokenInfo = ({ navigation ,route}: any) => {
    const locale: any = useContext(LocaleContext);
    const ConAddress = route?.params?.ConAddress || "" ;
    var title = route?.params?.coin || "";
    const tokenHttpInfo = route?.params?.tokenHttpInfo;
    const [TokenName,setTokenName] = useState("");
    const [TokenTotal,setTokenTotal] = useState("");
    const [web,setWeb] = useState(route?.params?.tokenHttpInfo.web || locale._("tokenInfo.Null"))
    const [whitePaper,setWhitePaper] = useState(route?.params?.tokenHttpInfo.whitePaper || locale._("tokenInfo.Null"))

    useEffect(()=>{
        const work = async () => {
            navigation.setOptions({ title: title,headerStyle:{backgroundColor:"#f3f3f3",height:height*0.07} })
            if(ConAddress!=="")
            {
                var TokenNameTemp =tokenHttpInfo.name;
                if(!TokenNameTemp)
                    TokenNameTemp= await getTokenCompleteName(ConAddress);
                setTokenName( TokenNameTemp);
                var TokenTotal:any = await getTokenTotal(ConAddress);
                setTokenTotal(TokenTotal);
                title = await getTokenName(ConAddress);
            }
        }
        work()
    },[])

    const onCopy = (data:string) => {
        Clipboard.setString(data);
        Toast.show(locale?._('copied') as string);
    };


    return (
        <View>
            <View style={{width:width,height:80,backgroundColor:"white",alignItems:"center",paddingLeft:width*0.05,flexDirection:"row"}}>
                {
                    ConAddress === '' ?
                        <Avatar source={logo} activeOpacity={0.7} size={50}/>
                        :
                        (
                            ConAddress === constansts.contractAddressImage.sUSDT ?
                                <Avatar source={require('./../assets/susdt.png')} activeOpacity={0.7} size={50}/>
                                :
                                (
                                    ConAddress === constansts.contractAddressImage.sETH?
                                        <Avatar source={require('./../assets/1.png')}
                                                activeOpacity={0.7} size={50}/>
                                        :
                                        (
                                            tokenHttpInfo.url == "" ?
                                                <Avatar source={require('./../assets/hotTokenLogo.png')}
                                                        activeOpacity={0.7}/>
                                                :
                                                <Avatar source={{uri: tokenHttpInfo.url}}
                                                        activeOpacity={0.7}/>
                                        )
                                )

                        )
                }
                <Text style={{fontSize:23,marginLeft:15}}>{title}</Text>
            </View>
            <View style={{width:width,height:10,backgroundColor:"#F3F3F3"}}/>
            <View style={{width:width,height:240,backgroundColor:"white"}}>
                <Text style={{marginTop:15,fontSize:15,marginLeft:20,fontWeight:"bold"}}>
                    {locale._("tokenInfo.Title")}
                </Text>
                <View style={{marginTop:10,marginLeft:20,flexDirection:"row",alignItems:"center",height:30}}>
                    <View>
                        <Text style={{justifyContent:"flex-start",fontSize:15,color:"#84878D"}}>
                            {locale._("tokenInfo.Web")}
                        </Text>
                    </View>
                    <View style={{flex:1}}>
                        <TouchableOpacity style={{flexDirection:"row",justifyContent:"flex-end"}} onPress={()=>{onCopy(web)}}>
                            {/*<Icon type='feather' name='copy' color='#54A7DB' size={15} iconStyle={{marginTop:3,marginRight:5}}/>*/}
                            <Text style={{marginRight:20,fontSize:15,color:"#54A7DB",letterSpacing:1,justifyContent:"flex-end"}}>
                                {web}
                            </Text>
                        </TouchableOpacity>
                    </View>
                </View>
                <View style={{marginTop:0,marginLeft:20,flexDirection:"row",alignItems:"center",height:30}}>
                    <View>
                        <Text style={{justifyContent:"flex-start",fontSize:15,color:"#84878D"}}>
                            {locale._("tokenInfo.ConAddress")}
                        </Text>
                    </View>
                    <View style={{flex:1}}>
                        <TouchableOpacity style={{flexDirection:"row",justifyContent:"flex-end"}} onPress={()=>{onCopy(ConAddress)}}>
                            <Icon type='feather' name='copy' color='#54A7DB' size={15} iconStyle={{marginTop:3,marginRight:5}}/>
                            <Text style={{marginRight:20,fontSize:15,color:"#54A7DB",letterSpacing:1,justifyContent:"flex-end"}}>
                                {ConAddress.slice(0,6)+"..."+ConAddress.slice(-6)}
                            </Text>
                        </TouchableOpacity>
                    </View>
                </View>
                <View style={{marginTop:0,marginLeft:20,flexDirection:"row",alignItems:"center",height:30}}>
                    <View>
                        <Text style={{justifyContent:"flex-start",fontSize:15,color:"#84878D"}}>
                            {locale._("tokenInfo.WhitePaper")}
                        </Text>
                    </View>
                    <View style={{flex:1}}>
                        <TouchableOpacity style={{flexDirection:"row",justifyContent:"flex-end"}} onPress={()=>{onCopy(whitePaper)}}>
                            {/*<Icon type='feather' name='copy' color='#54A7DB' size={15} iconStyle={{marginTop:3,marginRight:5}}/>*/}
                            <Text style={{marginRight:20,fontSize:15,color:"#54A7DB",letterSpacing:1,justifyContent:"flex-end"}}>
                                {whitePaper}
                            </Text>
                        </TouchableOpacity>
                    </View>
                </View>
                <View style={{marginTop:0,marginLeft:20,flexDirection:"row",alignItems:"center",height:30}}>
                    <View>
                        <Text style={{justifyContent:"flex-start",fontSize:15,color:"#84878D"}}>
                            {locale._("tokenInfo.Name")}
                        </Text>
                    </View>
                    <View style={{flex:1,alignItems:"flex-end"}}>
                        <Text style={{marginRight:20,fontSize:15,color:"#54A7DB",letterSpacing:1}}>
                            {TokenName}
                        </Text>
                    </View>
                </View>
                <View style={{marginTop:0,marginLeft:20,flexDirection:"row",alignItems:"center",height:30}}>
                    <View>
                        <Text style={{justifyContent:"flex-start",fontSize:15,color:"#84878D"}}>
                            {locale._("tokenInfo.Short")}
                        </Text>
                    </View>
                    <View style={{flex:1,alignItems:"flex-end"}}>
                        <Text style={{marginRight:20,fontSize:15,color:"#54A7DB",letterSpacing:1}}>
                            {title}
                        </Text>
                    </View>
                </View>
                <View style={{marginTop:0,marginLeft:20,flexDirection:"row",alignItems:"center",height:30}}>
                    <View>
                        <Text style={{justifyContent:"flex-start",fontSize:15,color:"#84878D"}}>
                            {locale._("tokenInfo.Total")}
                        </Text>
                    </View>
                    <View style={{flex:1,alignItems:"flex-end"}}>
                        <Text style={{marginRight:20,fontSize:15,color:"#54A7DB",letterSpacing:1}}>
                            {TokenTotal.replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g,'$1,')}
                        </Text>
                    </View>
                </View>



            </View>
            <View style={{width:width,height:10,backgroundColor:"#F3F3F3"}}/>

        </View>

    );
};

export default TokenInfo;
